<template>
  <div id="pop_infos">
    <!-- 工具面板组件 -->
    <div class="panelTitle" @click="bodyShowToggle">
      <span style="display: inline-block; width: 10px"></span
      ><span>提示信息</span>
    </div>
    <div class="panelBody" v-show="bIsDisplayBody">
      <label class="labStyle" for="plotpop">提示内容:</label>
      <textarea name="poptxt" id="plotpop"></textarea>
      <!-- <button type="button" class="popBtn" id="popCancelBtn" @click="popCancel()">取 消</button>&nbsp;
        <button type="button" class="popBtn" id="popOKBtn" @click="popOK()">确 定</button>
        <button type="button" class="popBtn" id="popOKBtn" @click="test('icon_1599552604424')">测 试</button>-->
    </div>
  </div>
</template>

<script>
// import Heatmap from './heatmap.js'

export default {
  // mixins: [Heatmap, Heatgrid], // mapStyle, mapFlash
  data() {
    return {
      // oMap: null, // 地图对象
      // sSRS: 'EPSG:4326', // 空间参照系（Spatial Reference System)
      bIsDisplayBody: false,
    };
  },
  watch: {
    // watch
  },
  mounted() {
    // mounted
  },
  methods: {
    // test (id) {
    //   this.updatePlotPop(id, this.$parent.xData)
    //   // 更新写入数据库
    //   const plotElement = this.getPlotFromXData(id)
    //   plotElement.TS = new Date().getTime()
    //   this.plotRecordUpdate(plotElement, 'U')
    // },
    /**
     * @description 显示隐藏body面板内容
     * @param null
     * @return null
     */
    bodyShowToggle() {
      this.bIsDisplayBody = !this.bIsDisplayBody;
      if (this.bIsDisplayBody) {
        // 展开提示主体
        const plotIDElement = document.getElementById("plotid");
        if (plotIDElement) {
          let sPlotID = plotIDElement.value;
          if (!sPlotID) return; // 没有选择的军标id，退出
          if (sPlotID.substr(0, 4) === "alt_") {
            sPlotID = sPlotID.substr(4);
          }
          const oPlotData = this.$parent.getPlotFromXData(sPlotID);
          if (oPlotData && oPlotData.pop) {
            console.log(oPlotData.pop);
            this.setPopInfos(oPlotData.pop);
          }
        }
      }
    },

    /**
     * @description 将字符串转换成对象（json）
     * @param sPopInfos {String}
     * @return oPopInfos {Object} 返回json数据对象
     */
    str2json(sPopInfos) {
      let oRes; // 返回的json对象
      // console.log(sPopInfos)
      if (typeof sPopInfos === "string") {
        try {
          oRes = JSON.parse(sPopInfos);
          // var obj=JSON.parse(str);
          if (typeof oRes === "object" && oRes) {
            // return oRes
          } else {
            oRes = { def: sPopInfos };
            // return false;
          }
        } catch (e) {
          oRes = { def: sPopInfos };
          console.log("提示信息非json结构");
        } finally {
          return oRes;
        }
      } else if (typeof sPopInfos === "object" && sPopInfos) {
        // object不一定都是json
        return sPopInfos;
      } else {
        oRes = { def: sPopInfos };
        return oRes;
      }
    },
    // 修改方法--暂时不用
    str2json2(sPopInfos) {
      let oRes; // 返回的json对象
      if (sPopInfos) {
        // 有信息处理
        if (typeof sPopInfos === "object") {
          return sPopInfos;
        } else if (typeof sPopInfos === "string") {
          try {
            oRes = JSON.parse(sPopInfos);
            // var obj=JSON.parse(str);
            if (typeof oRes === "object" && oRes) {
              // return oRes
            } else {
              oRes = { def: sPopInfos };
              // return false;
            }
          } catch (e) {
            oRes = { def: sPopInfos };
            console.log("提示信息非json结构");
          } finally {
            return oRes;
          }
        } else {
          oRes = { def: sPopInfos };
          return oRes;
        }
      } else {
        // 没有提示信息返回空
        return null;
      }
    },

    /**
     * @description 添加修改提示信息;plotPanel.js进行调用（okPlot）
     * @param sPlotID {String} 军标ID
     * @param aPlotData {Array} 保存每个军标数据的数组
     * @param PopInfos {Object|String} 军标提示信息对象
     * @return null
     */
    updatePlotPop(sPlotID, aPlotData, PopInfos = null) {
      if (!sPlotID) {
        console.log("没有提供有效的军标ID");
        return;
      }
      // 获取提示信息字符串
      let oPopInfos;
      if (PopInfos) {
        // 如果提供了提示信息
        if (typeof PopInfos === "object") {
          // 确认提示信息有效并且为对象数据（json）
          oPopInfos = PopInfos;
        } else {
          oPopInfos = this.str2json(PopInfos);
        }
      } else {
        // 如果没有提供军标提示对象数据，默认是通过工具面板添加提示西信息
        oPopInfos = document.getElementById("plotpop").value;
        if (!oPopInfos) {
          console.log("没有有效的提示信息");
          return;
        }
        // 将数据加功成json
        oPopInfos = this.str2json(oPopInfos);
      }
      // console.log(sPopInfos)
      // xData[]保存所有的plot数据
      for (let i = 0; i < aPlotData.length; i++) {
        // console.log(aPlotData[i].id, sPlotID)
        if (aPlotData[i].id === sPlotID) {
          aPlotData[i].pop = oPopInfos;
          console.log(aPlotData[i]);
          return;
        }
      }
      console.log("没有找到指定的军标ID");
    },

    /**
     * @description 设置提示信息的内容
     * @param oPopInfos {Object} 设置提示内容
     * @return null
     */
    setPopInfos(oPopInfos) {
      // 将字对象转换成字符串
      const plotPopDiv = document.getElementById("plotpop");
      console.log(plotPopDiv);
      if (plotPopDiv) {
        const sPopStr = JSON.stringify(oPopInfos);
        console.log(sPopStr);
        document.getElementById("plotpop").value = sPopStr;
      }
    },

    /**
     * @description 获取提示信息的内容
     * @param null
     * @return sPopInfos {Strnig} 提示信息内容
     */
    getPopInfos() {
      const sPopInfos = document.getElementById("plotpop").value;
      if (sPopInfos) {
        return sPopInfos;
      } else {
        return null;
      }
    },

    /**
     * @description 清空提示信息
     * @param null
     * @return null
     */
    clearPopInfos() {
      const plotPopDiv = document.getElementById("plotpop");
      if (plotPopDiv) {
        const sPopInfos = document.getElementById("plotpop").value;
        if (sPopInfos) {
          document.getElementById("plotpop").value = "";
        }
      }
    },

    /**
     * @description 取消添加提示信息
     * @param null
     * @return null
     */
    popCancel() {
      document.getElementById("plotpop").value = "";
    },

    /** 暂时不使用！！！
     * @description 确定气泡提示信息
     * @param sPlotID {String} 军标ID，这里拿不到军标的id；此方法暂时不使用
     * @return null
     */
    popOK(sPlotID) {
      if (!sPlotID) {
        console.log("没有提供有效的军标ID");
        return;
      }
      const sPopInfos = document.getElementById("plotpop").value;
      // xData[]保存所有的plot数据
      const aPlotData = this.$parent.xData;
      for (let i = 0; i < aPlotData.length; i++) {
        console.log(aPlotData[i].id);
        if (aPlotData[i].id === sPlotID) {
          aPlotData[i].pop = sPopInfos;
          return;
        }
      }
      console.log("没有找到指定的军标ID");
    },

    // 当前方法
  },
};
</script>

<style scoped lang="scss">
.panelTitle {
  text-align: center;
  span {
    font-family: "Microsoft Yahei";
    font-size: 12px;
  }
}
.panelBody {
  width: 99.5%;
  margin-left: 0.5px;
  background-color: #ccc;
  border-right: 1px sold #f00;
}
.labStyle {
  font-family: "Microsoft Yahei";
  font-size: 10px;
  margin: 5px 12px;
}
#plotpop {
  width: 200px;
  height: 100px;
  color: #999;
  font-family: "Microsoft Yahei";
  font-size: 12px;
  margin: 0 6px;
}
.popBtn {
  width: 64px;
  font-family: "Microsoft Yahei";
  font-size: 10px;
}
#popCancelBtn {
  margin: 0 6px 6px 36px;
}
#popOKBtn {
  margin: 0 6px 6px 6px;
}
</style>
